<template>
  <div>
    <!-- 查询 -->
    <div>
      <a-row>
        <a-col :span="6">
          <a-form-item label="用户名称" :wrapper-col="{ span: 16 }" name="name">
            <a-input
              v-model:value="queryData.name"
              placeholder="请输入用户名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            label="用户账号"
            :wrapper-col="{ span: 16 }"
            name="userName"
          >
            <a-input
              v-model:value="queryData.userName"
              placeholder="请输入用户账号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="用户身份" :wrapper-col="{ span: 16 }" name="type">
            <a-select
              placeholder="请选择用户身份"
              ref="select"
              v-model:value="queryData.type"
            >
              <a-select-option :value="1">管理员</a-select-option>
              <a-select-option :value="2">用户</a-select-option>
              <a-select-option :value="3">社区医生</a-select-option>
              >
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="6">
          <a-button @click="reset" style="margin-left: 20px">重置</a-button>
          <a-button
            @click="selectUser"
            style="margin: 0 20px; background-color: #6a2c70"
            type="primary"
            >查询</a-button
          >
          <a-button
            @click="openDrawer(0)"
            type="primary"
            style="background-color: #b83b5e"
          >
            <template #icon>
              <PlusOutlined />
            </template>
            新增用户</a-button
          >
        </a-col>
      </a-row>
    </div>

    <!--    -->
    <a-table
      tableLayout="fixed"
      :loading="isloading"
      :pagination="pagination"
      :columns="columns"
      :data-source="userList.data"
      @change="handleTableChange"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'index'">
          {{
            queryData.page == 1
              ? index + 1
              : (queryData.page - 1) * queryData.pageSize + index + 1
          }}
        </template>
        <template v-if="column.key === 'type'">
          {{ convertType(record.type) }}
        </template>

        <template v-if="column.key === 'communityName'">
          <a-tooltip>
            <template #title>{{ record.communityName }}</template>
            <div class="hidden">{{ record.communityName }}</div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'avatar'">
          <a-image
            style="border-radius: 8px"
            :width="60"
            :src="record.avatar"
          />
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            @click="openDrawer(record.empId)"
            type="primary"
            style="margin-right: 20px; background-color: #f5b017"
            >编辑</a-button
          >
          <a-popconfirm
            title="确认删除此用户吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="deleteUser(record)"
          >
            <a-button type="primary" style="background-color: #f38181" danger
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <!-- 抽屉 -->
    <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      :title="drawerTitle"
      placement="right"
      width="60%"
      :maskClosable="false"
    >
      <UserDrawer v-if="open" :empId="empId" @receiveData="receiveData" />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { columns } from './columns'
import UserDrawer from './UserDrawer.vue'
import { PaginationModel } from '@/api/config/Model'
import { apiUserList, apiDelete } from '@/api/User/api'
import { PlusOutlined } from '@ant-design/icons-vue'
import { UserQuery } from '@/api/User/model/loginModel'
import { message } from 'ant-design-vue'
const queryData: UserQuery = reactive({
  name: '',
  type: null,
  userName: '',
  page: 1,
  pageSize: 10,
})
const isloading = ref<boolean>(false)
const empId = ref<number | null>(null)
const open = ref<boolean>(false)
const drawerTitle = ref<string>('新增用户')
const pagination = ref<PaginationModel>({
  current: 1,
  total: 100,
  pageSize: 10, //每页中显示10条数据
  pageSizeOptions: ['10', '20', '30'],
})

const userList = reactive({
  data: [],
})

const selectUser = () => {
  getUserList()
}

const openDrawer = (id: number) => {
  open.value = true
  empId.value = id
  if (id == 0) {
    drawerTitle.value = '新增用户'
  } else {
    drawerTitle.value = '修改用户'
  }
}
const convertType = (type: number) => {
  switch (type) {
    case 1:
      return '管理员'
    case 2:
      return '用户'
    case 3:
      return '社区医生'
    default:
      return '身份错误'
  }
}

//重置查询表单
const reset = () => {
  Object.keys(queryData).forEach((key) => delete queryData[key])
  queryData.page = 1
  queryData.pageSize = 10
  getUserList()
}

//删除用户
const deleteUser = async (record: any) => {
  await apiDelete(record.empId)
  message.success('删除成功！')
  getUserList()
}
//接受抽屉传递过来的数据
const receiveData = (type: number) => {
  if (type == 1) {
    message.success('修改成功')
  } else if (type == 3) {
    message.success('添加成功')
  } else if (type == 2) {
    message.error('修改失败')
  } else {
    message.error('添加失败')
  }
  getUserList()
  empId.value = 0
  open.value = false
}

// 分页改变
const handleTableChange = (page: any) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  queryData.page = page.current
  queryData.pageSize = page.pageSize
  getUserList()
}

//获取用户列表
const getUserList = async () => {
  isloading.value = true
  try {
    let res = await apiUserList(queryData)
    userList.data = res.data.records
    pagination.value.current = res.data.current
    pagination.value.pageSize = res.data.size
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取用户列表失败')
  }
  isloading.value = false
}
onMounted(async () => {
  getUserList()
})
</script>

<style lang="less" scoped>
.hidden {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
